﻿<!-- zTree -->
<link rel="stylesheet" href="assets/libs/zTree/css/zTreeStyle/zTreeStyle.css"/>

<!-- 正文开始 -->
<div class="layui-fluid" id="roleAuthSearch">
    <div class="layui-card">
        <div class="layui-card-body">
            <div class="layui-form toolbar" lay-filter="roleAuthSearch">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-label">角色</label>
                        <div class="layui-inline">
                            <select data-id="roleId" lay-filter="roleAuth-roleId" data-codeKey="id" data-codeText="name">
                                <option value="" data-default=""></option>
                            </select>
                        </div>
                        <div class="layui-inline">
                            <button class="layui-btn icon-btn btnSearch"><i class="layui-icon">&#xe615;</i>刷新</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-sm6 layui-col-md4 layui-col-lg4">
                <div class="layui-card">
                    <div class="layui-card-header">
                        <div class="layui-inline">
                            <button class="layui-btn icon-btn btnSaveMenu layui-btn-normal"><i class="layui-icon layui-icon-ok"></i>保存菜单</button>
                        </div>
                    </div>
                    <div class="layui-card-body mini-bar" style="height: 350px;width:300px; overflow-y: auto;overflow-x: auto;">
                        <ul id="roleAuthTree" class="ztree" style="padding: 20px 0px 20px 20px;"></ul>
                    </div>
                </div>
            </div>
            <div class="layui-col-sm6 layui-col-md4 layui-col-lg4">
                <div class="layui-card">
                    <div class="layui-card-header">
                        <div class="layui-inline">
                            <button class="layui-btn icon-btn btnSaveUser layui-btn-normal"><i class="layui-icon layui-icon-ok"></i>保存用户</button>
                        </div>
                    </div>
                    <div class="layui-card-body">
                        <table class="layui-table" id="roleAuthUserTable" lay-filter="roleAuthUserTable"></table>
                    </div>
                </div>
            </div>
            <div class="layui-col-sm6 layui-col-md4 layui-col-lg4">
                <div class="layui-card">
                    <div class="layui-card-header">
                        <div class="layui-inline">
                            <button class="layui-btn icon-btn btnSaveDept layui-btn-normal"><i class="layui-icon layui-icon-ok"></i>保存科室</button>
                        </div>
                    </div>
                    <div class="layui-card-body">
                        <table class="layui-table" id="roleAuthDeptTable" lay-filter="roleAuthUserTable"></table>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

<!-- zTree -->
<script type="text/javascript" src="assets/libs/zTree/js/jquery.ztree.all-3.5.min.js"></script>
<script>
    layui.use(['form', 'tools', 'table','http'], function () {
        var $ = layui.jquery;
        var form = layui.form;
        var tools = layui.tools;
        var table = layui.table;
        var http = layui.http;

        var setting = {
            check: {enable: true},
            data: {
                simpleData: {idKey:'id',pIdKey:'parentId',rootPId:null,enable: true}
            }
        };
        var fnLoadMenuTree = function(treeElem, roleIdValue){
            http.get('role/getRoleMenuTree', {
                roleId: roleIdValue
            }, function (res) {
                if(res.ok) {
                    for(var i=0;i<res.data.length;i++){
                        if(res.data[i].parentId === 0){
                            res.data[i].isParent = true;
                        }
                    }
                    $.fn.zTree.init(treeElem, setting, res.data);
                }
            });
        };
        var fnRender = function(roleList){
            var viewId = "#roleAuthSearch";
            var $view = $(viewId);
            var $roleId = $view.find("[data-id='roleId']");
            var $roleAuthTree = $("#roleAuthTree");

            var fnSetHeight = function(){
                var h = $(window).height() - 230;
                $roleAuthTree.parent().height(h < 100 ? 100 : h);
            };

            //设置tree高度
            $(window).on('resize',function(){
                fnSetHeight();
            });
            fnSetHeight();

            if(roleList && roleList.length > 0) {
                tools.select.options($roleId, roleList,roleList[0].id);
            }
            form.render('','roleAuthSearch');

            //渲染$roleAuthTree
            fnLoadMenuTree($roleAuthTree,$roleId.val());
            $view.find(".btnSearchMenu").click(function(){
                fnLoadMenuTree($roleAuthTree,$roleId.val());
            });


            // 保存菜单
            $view.find(".btnSaveMenu").click(function () {
                var treeObj = $.fn.zTree.getZTreeObj('roleAuthTree');
                var nodes = treeObj.getCheckedNodes(true);
                var ids = new Array();
                for (var i = 0; i < nodes.length; i++) {
                    ids[i] = nodes[i].id;
                }
                if(ids.length <= 0){
                    return;
                }
                http.post('role/saveRoleMenuTree', {
                    roleId: $roleId.val(),
                    menuIds: ids.join(",")
                }, function (res) {
                    if(res.ok){
                        http.okMsg("保存成功");
                    }
                });
            });

            //渲染User表格
            var roleAuthUserTableIns = table.render({
                id: 'roleAuthUserTable',
                elem: '#roleAuthUserTable',
                url: http.base_server + 'role/getUserList',
                method: 'GET',
                where: {
                    roleId: $roleId.val()
                },
                page: false,
                cellMinWidth: 50,
                height: 'full-240',
                cols: [[
                    {type: 'numbers'},
                    {type: 'checkbox'},
                    {field: 'id', title: 'ID', hide: true},
                    {field: 'userCode', sort: true, title: '账号',width:100},
                    {field: 'userName', sort: true, title: '用户名',width:150}
                ]],
                error: function(code,msg){
                    http.fail(code,msg);
                },
                parseData: function(res){
                    for(var i=0;i<res.data.length;i++){
                        res.data[i]["LAY_CHECKED"] = !!res.data[i].roleId;
                    }
                    return res;
                },
                done: function(res, curr, count){
                }
            });

            //渲染User表格
            var roleAuthDeptTableIns = table.render({
                id: 'roleAuthDeptTable',
                elem: '#roleAuthDeptTable',
                url: http.base_server + 'role/getDeptList',
                method: 'GET',
                where: {
                    roleId: $roleId.val()
                },
                page: false,
                cellMinWidth: 50,
                height: 'full-240',
                cols: [[
                    {type: 'numbers'},
                    {type: 'checkbox'},
                    {field: 'id', title: 'ID', hide: true},
                    {field: 'code', sort: true, title: '科室编号',width:100},
                    {field: 'name', sort: true, title: '科室名称',width:150}
                ]],
                error: function(code,msg){
                    http.fail(code,msg);
                },
                parseData: function(res){
                    for(var i=0;i<res.data.length;i++){
                        res.data[i]["LAY_CHECKED"] = !!res.data[i].roleId;
                    }
                    return res;
                },
                done: function(res, curr, count){
                }
            });

            // 保存菜单
            $view.find(".btnSaveUser").click(function () {
                var data = table.checkStatus('roleAuthUserTable').data;
                var ids = new Array();
                for (var i = 0; i < data.length; i++) {
                    ids[i] = data[i].id;
                }
                if(ids.length <= 0){
                    return;
                }

                http.post('role/saveUserList', {
                    roleId: $roleId.val(),
                    userIds: ids.join(",")
                }, function (res) {
                    if(res.ok){
                        http.okMsg("保存成功");
                    }
                });
            });

            // 保存科室
            $view.find(".btnSaveDept").click(function () {
                var data = table.checkStatus('roleAuthDeptTable').data;
                var ids = new Array();
                for (var i = 0; i < data.length; i++) {
                    ids[i] = data[i].id;
                }
                if(ids.length <= 0){
                    return;
                }

                http.post('role/saveDeptList', {
                    roleId: $roleId.val(),
                    deptIds: ids.join(",")
                }, function (res) {
                    if(res.ok){
                        http.okMsg("保存成功");
                    }
                });
            });

            var fnReloadUserTable = function(){
                roleAuthUserTableIns.reload({where:{roleId:$roleId.val()}});
            };
            var fnReloadDeptTable = function(){
                roleAuthDeptTableIns.reload({where:{roleId:$roleId.val()}});
            };
            $view.find(".btnSearchUser").click(function(){
                fnReloadUserTable();
            });
            $view.find(".btnSearchDept").click(function(){
                fnReloadDeptTable();
            });

            form.on('select(roleAuth-roleId)',function(){
                fnLoadMenuTree($roleAuthTree,$roleId.val());
                fnReloadUserTable();
                fnReloadDeptTable();
            });
            $view.find(".btnSearch").click(function () {
                fnLoadMenuTree($roleAuthTree,$roleId.val());
                fnReloadUserTable();
                fnReloadDeptTable();
            });

        };

        http.get('role/codeList',{}, function(res){
           if(res.ok){
               fnRender(res.data);
           }
        });

    });
</script>

</body>
</html>